<template>
  <view>
    <view>
      <view
        class="question"
        v-for="(item, index) in content"
        :key="index"
        @click="videoClick(item.video)"
      >
        <view class="text">{{ item.title }}</view>
        <view>
          <video class="video" id="myVideo" :src="item.video"></video>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import md5 from "@/static/md5.js";
export default {
  data() {
    return {
      list: "",
      content: [],
      key: "521739CE5E82CBDF",
    };
  },
  onLoad: function (option) {
    this.id = this.id;
    if (option) {
      let list = JSON.parse(uni.getStorageSync("videoList"));
      this.list = list[option.index];
    }
    // this.dealInfo();
  },
  onShow() {
    this.dealInfo();
  },
  methods: {
    getVideo() {
      const sign = md5(
        `ChannelId=${this.list.id}&limit=20&page=2&key=${this.key}`
      );
      return new Promise((resolve, reject) => {
        uni.request({
          url: `/api/api/Message/GetList?ChannelId=${this.list.id}&limit=20&page=2&sign=${sign}`,
          method: "GET",
          success: (res) => {
            this.content = res.data.Data.MFMessageDataItems;
            let content = uni.setStorageSync("content", this.content);
            resolve("suc");
          },
          fail: (err) => {
            reject("err");
          },
        });
      });
    },
    async dealInfo() {
      await this.getVideo();
    },
    videoClick(params) {
      this.debounce(this.navigate(params), 300);
    },

    navigate(params) {
      uni.navigateTo({
        url: `../video/video?index=${params}`,
      });
    },
    debounce(func, wait) {
      let timer;
      return function () {
        let context = this; // 注意 this 指向
        let args = arguments; // arguments中存着e
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
          func.apply(this, args);
        }, wait);
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.question {
  width: 96%;
  margin-left: 4%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 100upx;
  .text {
    margin-bottom: 3%;
  }
}
</style>
